<template>
  <div class="app-container">
    <div slot="header" class="clearfix"></div>
    <div>
      <div>
  <div style="margin-top: 20px">
    <el-row >
  <el-button  type="info" plain icon="el-icon-circle-plus-outline" v-hasPermi="['cmdb:asset:add:post']" @click="on_add_data(true)">添加资产</el-button>
  <el-button type="info" plain icon="el-icon-d-caret" @click="on_input_output()">导入导出</el-button>

              <el-input
          id="search_input"
          ref="search_input"
          :autofocus="is_focus"
          :trigger-on-focus="false"
          :suffix-icon="search_input_icon"
          @focus="on_focus"
          :fetch-suggestions="history_filter"
          select-when-unmatched
          @keyup.enter.native="on_search(query)"
          placeholder="示例：(hostname:huawei* AND price:[20000 TO 40000]) 更多请参阅Lucene语法"
          v-model="query"
          style="width: 75%"
        >


          <el-select
            v-model="indices"
            style="width: 180px"
            slot="prepend"
    collapse-tags
            multiple
            filterable
            default-first-option
            placeholder="筛选资产 默认：all"
          >
            <el-option
              style="
                padding: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
              v-for="item in tables"
              :key="item.id"
              :label="item.alias"
              :value="item.name"
            >
              <span>{{ item.alias }}</span>
              <div>
                <el-button
                  style="padding: 0px"
                  icon="el-icon-circle-plus"
                  @click.stop="on_add_data(item)"
                ></el-button>
                <el-button
                  style="padding: 0px"
                  icon="el-icon-info"
                  @click.stop="on_show_info(item)"
                ></el-button>
              </div>
            </el-option>
          </el-select>
          <el-button
            id="submit"
            @click="on_search(query)"
            slot="append"
            icon="el-icon-search"
            :loading="loading"
          ></el-button>
              </el-input>
    </el-row>
  </div>


      </div>
      <div
        style="
          border: 1px #dcdfe6 solid;
          margin: 10px 0px;
          width: 100%;
          overflow-x: auto;
        "
      >
        <el-table
          :data="data"
          border
          highlight-current-row
          @current-change="handleCurrentChange"
          :header-cell-style="{ 'text-align': 'center' }"
          v-loading="loading"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          style="width: 100%"
          @filter-change="filterHandler"
        >
          <el-table-column fixed="right" label="操作" width="220">
            <template slot-scope="scope">
              <ul style="white-space: nowrap; margin: 0px; padding: 0px">
                <li
                  style="
                    display: inline-block;
                    border: 0px solid #e4e7ed;
                    padding: 2px;
                  "
                >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="on_view(scope.row)"
                v-hasPermi="['cmdb:asset:get']"
              >详情
              </el-button>
                </li>
                <li
                  style="
                    display: inline-block;
                    border: 0px solid #e4e7ed;
                    padding: 2px;
                  "
                >
                              <el-button
                size="mini"
                type="text"
                icon="el-icon-time"
                @click="on_audit(scope.row)"
                v-hasPermi="['admin:system:operlog:get']"
              >审核
              </el-button>
                </li>
                                <li
                  style="
                    display: inline-block;
                    border: 0px solid #e4e7ed;
                    padding: 2px;
                  "
                >
                            <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="on_edit(scope.row)"
                v-hasPermi="['cmdb:asset:updatedata:put']"
              >编辑
              </el-button>
                </li>
                                <li
                  style="
                    display: inline-block;
                    border: 0px solid #e4e7ed;
                    padding: 2px;
                  "
                >
                
                                          <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                    @click="on_delete(scope.row)"
                v-hasPermi="['admin:system:operlog:get']"
              >删除
              </el-button>
                </li>
              </ul>
            </template>
          </el-table-column>
          <el-table-column type="index" label="序号" width="50" align="center">
          </el-table-column>
          <el-table-column label="设备名称" width="170" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row._source.jb.name
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="IP地址"
            width="140"
            align="center"
          >
           <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row._source.jb.ip
              }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="所属机房"
            width="120"
            align="center"
          >
                      <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row._source.jb.room
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="所属机柜"
            width="80"
            align="center"
          >
                      <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row._source.jb.cabinet
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="供应商"
            width="200"
            align="center"
          >
                      <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row._source.jb.supplier
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="在线状态" width="100" align="center">
            <template slot-scope="scope">
             {{scope.row._source.jb.online}}
              <!-- <el-tag type="warning" effect="dark">离线</el-tag>
  <el-tag type="danger" effect="dark">下架</el-tag> -->
            </template>
          </el-table-column>
          <el-table-column label="审核状态" width="100" align="center" :filters="sttatus_fileter" :filter-multiple="false" column-key="audit">
            <template slot-scope="scope">
             {{scope.row._source.jb.audit}}
            </template>
          </el-table-column>

        </el-table>
      </div>
      <el-pagination
        style="float: right; margin-right: 100px"
        background
        layout="total, prev, pager, next"
        :page-size="page_size"
        :total="total_num"
        :current-page.sync="current_page"
        @current-change="on_page_change"
      >
      </el-pagination>
    </div>
    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body @close="submitForm">
      <FileUpload ref="saveFile" :file-type="['ALL']" @input="submitForm"></FileUpload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">完 成</el-button>
      </div>
    </el-dialog>

    <el-dialog title="导入导出" :visible.sync="importVisible" width="300px">
<el-button type="" @click="xls_outport" icon="el-icon-s-fold">导出文件</el-button>
<el-button type="" @click="xls_import" icon="el-icon-s-unfold">导入文件</el-button>

</el-dialog>

  </div>
</template>

<script>
import { listTable,xlsMould } from "@/api/vadmin/cmdb/table";
import DetailData from './components/DetailData'
import { listData,delData,searchdata } from "@/api/vadmin/cmdb/data"
import FileUpload from './components/upload'
export default {
  name: "ChangeLog",
  components: {
    DetailData,
    FileUpload
  },
  data: () => {
    return {
      data: [],
      importVisible:false,
      title:"",
      open:false,
      tables:[],
      total_num:0,
      page_size:10,
      radio2: '筛选资产',
      loading:false,
      current_page:1,
      indices: [],
      is_focus: true,
      temp_data:[],
      c_key:"",
      search_input_icon: "el-icon-edit",
      query:"",
      sttatus_fileter:[{ text: '已审核', value: "已审核" }, { text: '未审核', value: "未审核" }, { text: '不匹配', value: "不匹配" }, { text: '丢失', value: "丢失" }]
    
    };
  },
  created(){
  },
  mounted() {
     this.getList()
  },
  methods: {
    async getList(query) {
      listTable(query).then(response => {
        this.tables = response.results;
        console.log(this.tables)
        listData({page:1}).then(response=>{
            this.data=response.msg.hits
                      console.log(this.data)

                    this.total_num =response.msg.total
        })
      });
    },    
    on_search(query){
          var query_data={"index":this.indices,"data":{"page_size":10,
                "page":1,
                "query":query
                }}
          searchdata(query_data).then(response=>{
           this.data=response.msg.hits.hits
           this.total_num =response.msg.hits.total
          })
    },
    async on_add_data(data){
       this.$router.push({ path: '/cmdb/asset/add',name:'AddDATA'})
      // this.$refs.childAddData.on_show(true,data,false);
    },
    on_show_info(){

    },
    handleCurrentChange(){

    },
    history_filter(){

    },
    on_page_change(){
        listData({page:this.current_page}).then(response=>{
            this.data=response.msg.hits
                    this.total_num =response.msg.total
        })
    },
    on_focus(){

    },
    on_input_output(){
      this.importVisible=true;
      this.title = "上传文件";
    },
    xls_import(){
            this.open = true;
    },
        xls_outport(){
          console.log(`${process.env.VUE_APP_BASE_API}/admin/data/xls/`)
          window.open(`${process.env.VUE_APP_BASE_API}/admin/data/xls/`);
              // this.download(`${process.env.VUE_APP_BASE_API}/admin/data/xls/`,"xls_moulde.xls")
   
    },
    on_delete(data){
      var query={}
      query["_index"]=data["_index"]
      query["_id"]=data["_id"]
      this.$confirm("确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
        delData(query).then(response=>{
           this.msgSuccess("删除成功！")
           this.getList()
        }).catch(error => {});
          });
    },
    on_edit(data){
      localStorage.setItem('items', JSON.stringify(data));
      this.$router.push({ path: '/cmdb/asset/updatedata',name:'UpdateDATA'})
      // this.$refs.childUpdateData.on_show(true,data,false);

    },

    on_audit(data){
      localStorage.setItem('items', JSON.stringify(data));
      this.$router.push({ path: '/cmdb/asset/audit',name:'Audit'})    },

          /** 完成按钮 */
      submitForm: function () {
        this.open = false;
        this.$refs.saveFile.fileList = []
      },
    on_view(data){
      localStorage.setItem('items', JSON.stringify(data));
      this.$router.push({ path: '/cmdb/asset/detail',name:'DetailData'})
    },
    filterHandler(data){
      if (data.audit[0]==undefined){
        this.query=""
      }else{
        this.query=data.audit[0]
      }
        this.on_search({audit:this.query})
            console.log("fffffffffffff",data.audit[0])

    },


  },
};
</script>
